<template>
	<div>
		<el-dialog
			title="修改"
			:visible.sync="compileDialogTableVisible"
			:close-on-click-modal="false"
			:show-close="false"
			:close-on-press-escape="false"
		>
			<el-form
				ref="compileContent"
				:model="compileContent"
				label-width="100px"
				:rules="rules"
			>
				<el-form-item label="机构名称：" prop="orgName">
					<el-select
						v-model="compileContent.orgName"
						filterable
						remote
						:remote-method="remoteMethod"
						placeholder="请选择"
						@input="sllectChange"
					>
						<el-option
							v-for="(item, index) in options"
							:key="index"
							:label="item.orgName"
							:value="index"
						>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="接口类型" prop="typeName">
					<el-select
						v-model="compileContent.typeName"
						filterable
						remote
						:remote-method="remoteMethod"
						placeholder="请选择"
						@input="selectTypeChange"
					>
						<el-option
							v-for="(item, index) in typeOptions"
							:key="index"
							:label="item.display"
							:value="index"
						>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="接口名称：" prop="interfaceName">
					<el-input v-model="compileContent.interfaceName"></el-input>
				</el-form-item>
				<el-form-item label="接口地址：" prop="interfaceUrl">
					<el-input v-model="compileContent.interfaceUrl"></el-input>
				</el-form-item>
				<el-form-item label="接口描述：" prop="remark">
					<el-input v-model="compileContent.remark" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm('compileContent')"
					>确 定
				</el-button>
				<el-button @click="cancel('compileContent')">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getOrgHospitalList } from '@/http/org.js'
import { updateHospInterface } from '@/http/common.js'
import { getSysDataDictList } from '@/http/dict.js'
export default {
	props: {
		compileDialogTableVisible: {
			type: Boolean,
			default: false,
		},
		compileRow: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	data() {
		return {
			value: '',
			options: [],
			typeOptions: [],
			optionsId: '',
			optionsName: '',
			optionsTypeId: '',
			optionsTypeName: '',
			rules: {
				orgName: [{ required: true, message: '不能为空', trigger: 'blur' }],
				interfaceType: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				interfaceName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				interfaceUrl: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				remark: [{ required: true, message: '不能为空', trigger: 'blur' }],
			},
		}
	},
	computed: {
		compileContent() {
			console.log(this.compileRow, '123')
			return this.compileRow
		},
	},
	// watch: {
	// 	sllectChange() {
	// 		this.optionsId = this.compileContent.orgId
	// 		this.optionsName = this.compileContent.orgName
	// 	},
	// },
	created() {
		this.selectList(1)
		this.selectTypeList()
	},
	methods: {
		sllectChange(index) {
			console.log(this.options[index].orgName, '123')
			this.optionsId = this.options[index].id
			this.optionsName = this.options[index].orgName
			console.log(this.optionsName, '123')
		},
		selectTypeChange(index) {
			this.optionsTypeId = this.typeOptions[index].value
			this.optionsTypeName = this.typeOptions[index].display
			console.log(this.typeOptions[index].value)
		},
		remoteMethod(query) {
			this.selectList(1, query.toUpperCase())
		},
		selectList(officeType, orgNameOrInputCode) {
			getOrgHospitalList({
				officeType: officeType,
				orgNameOrInputCode: orgNameOrInputCode,
			}).then(({ data }) => {
				if (data.head.code == 200) {
					console.log(data)
					this.options = data.data
				}
			})
		},

		selectTypeList() {
			getSysDataDictList({ type: 'RC_INTERFACE_TYPE' }).then(({ data }) => {
				if (data.head.code == 200) {
					console.log(data, '123')
					this.typeOptions = data.data
				}
			})
		},
		confirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let update = {
						id: this.compileContent.id,
						orgId:
							this.optionsId == '' ? this.compileContent.orgId : this.optionsId,
						orgName:
							this.optionsName == ''
								? this.compileContent.orgName
								: this.optionsName,
						typeCode:
							this.optionsTypeId == ''
								? this.compileContent.typeCode
								: this.optionsTypeId,
						typeName:
							this.optionsTypeName == ''
								? this.compileContent.typeName
								: this.optionsTypeName,
						interfaceName: this.compileContent.interfaceName,
						interfaceUrl: this.compileContent.interfaceUrl,
						remark: this.compileContent.remark,
					}
					console.log(update, 'CS ', this.optionsTypeName, '123')
					// console.log(this.optionsName, '测试测试测试')
					updateHospInterface(update).then(({ data }) => {
						console.log(data)
						if (data.head.code == 200) {
							this.$message({
								message: '保存成功',
								type: 'success',
							})
						}
					})
					let dialogValue = {
						verdict: false,
						typeValue: 1,
					}
					this.$nextTick(() => {
						this.$refs['compileContent'].clearValidate()
					})
					this.$emit('compileClick', dialogValue)
				} else {
					return false
				}
			})
		},
		// 取消
		cancel() {
			let dialogValue = {
				verdict: false,
				typeValue: 0,
			}
			this.$nextTick(() => {
				this.$refs['compileContent'].clearValidate()
			})
			this.$emit('compileClick', dialogValue)
		},
	},
}
</script>

<style></style>
